<template>
  <div id="infobox">
    <!-- 即时通讯聊天界面 -->
    <div class="info-body">
      <!-- 左边界面 -->
      <div class="left-info" v-if="user.length>0">
        <!-- 用户列表 -->
        <div class="left-info-list" :class="activeId==index?'activeLine':''" @click="tabId(index,item.realname,item.role)" v-for="(item,index) in user" :key="index">
<!--          <div class="img-box"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>-->
          <div class="user-box">
            <div class="title-line">
              <span class="title-line-name">{{item.realname}}<em v-if="item.class_id !==''">{{item.class_id}}</em><em>{{item.role}}</em></span>
            </div>
          </div>
        </div>
      </div>
      <!--右边界面-->
      <div class="right-info">
        <div id="user-info">
          <!--用户详情-->
          <div class="user_detail">
            <div class="user-top-line">
              <div class="user-top-line-left">
                <p class="user-name">测试账号</p>
                <p class="user-desc">描述</p>
              </div>
              <div class="user-top-line-right">
<!--                <img src="@/assets/imageAdmin/logo.jpg" alt="">-->
              </div>
            </div>
            <div class="user-center-line">
              <p><span>备注</span><span>测试账号1</span></p>
              <p><span>备注</span><span>测试账号2</span></p>
              <p><span>备注</span><span>测试账号3</span></p>
            </div>
            <div class="user-button-line">
              <button class="el-button el-button--primary">发消息</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        activeId: 0,
        user: [],
        to_user: []
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      tabId (id, name, role) {
        this.activeId = id
        this.to_user['name'] = name
        this.to_user['role'] = role
      },
      InitFn () {
        console.log(this.$root.user_id) // 当前登录账号的id
        this.$fetch('admin_user/index', '').then((response) => {
          if (response.code === 0) {
            console.log(response.list.data)
            this.user = response.list.data
            this.to_user['name'] = response.list.data['0'].realname
            this.to_user['role'] = response.list.data['0'].role
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
  //@import "../../assets/scss/info.scss";
</style>
